<template>
  <!-- 左边 -->
  <div>
    <div class="banner-outer">
      <div @mouseleave="out()">
        <div class="banner-left" @mouseleave="outright()">
          <ul>
            <div class="first-list">
              全部商品分类
            </div>
            <li @mouseover="over(index)" v-for="(item,index) in listener">
              <h5>{{item.cate_name}}</h5>
              <div class="product">
                <a href="#/">
                  <span class="colorAnimate" v-for="key in item.cates">{{key.cate_name}}</span>
                </a>
              </div>
            </li>
          </ul>
        </div>
        <div>
          <ul id="BannerLii" v-if="BannerLii">
            <li v-for="(ite,index) in listener" v-if="state" class="states">
              <div class="posten">
                <div class="BannerLii-list" v-for="(items,index) in ite.cates" v-bind:style="{top:index*40+'px'}">
                  <a href="#">{{items.cate_name}}</a>

                  <div class="BannerLii-left">
                <span v-for="it in items.catess">
                  &nbsp;
                  <router-link to="#" class="listss">{{it.cate_name}}</router-link>
                  <!--<a href="#" class="listss">{{item.cate_name}}</a>-->
                </span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- <div v-bind:class="it.name"  v-bind:style="{zIndex: state?zIndexs:0}" v-for="it in className">{{it.index}}</div> -->
      <!-- 轮播图 -->
      <div class="block">
        <span class="demonstration"></span>
        <el-carousel>
          <el-carousel-item v-for="itemss in bannerImg">
            <img class="imgList" v-bind:src="itemss.url" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 右边 -->
      <div class="banner-right">
        <ul>
          <li class="banner-top">
            <i class="fa fa-diamond"></i>
            <span class="banner-pz">{{safe.title}}</span>
            <span>></span>
          </li>
          <li class="banner-li">
            {{safe.head}}
          </li>
          <li>
            <ul class="banner-ul">
              <li v-for="ie in safe.list">{{ie.title}}</li>
            </ul>
          </li>
          <li class="bannerlastli">
            <div class="banner-img"><img v-bind:src="safe.img" alt=""></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Banner",
    data() {
      return {
        number: 1,
        rightindex: '',
        safe: {
          title: "品质保障",
          head: "生鲜头条",
          list: [],
          img: require("../../assets/6.png")
        },
        state: true,
        BannerLii: true,
        zIndexs: 100,
        className: [
          {name: "x-center youlei", index: 0},
          {name: "x-center xialei", index: 1},
          {name: "x-center xielei", index: 2},
          {name: "x-center beilei", index: 3},
          {name: "x-center roulei", index: 4}
        ],
        bannerImg: [],
        listener: [],
      }
    },
    mounted() {
      this.classifyData();
      this.queryBanner();
      this.queryTalk();
    },
    methods: {
      classifyData() {
        this.$ajax.get("http://60.205.186.52/laravel53/public/api/category/0").then(result => {
          this.listener = result.data;
        })
      },
      queryBanner(){
        this.$ajax.get("http://60.205.186.52/laravel53/public/api/sowing_map").then(result=>{
          this.bannerImg = result.data;
        })
      },
      queryTalk(){
        this.$ajax.get("http://60.205.186.52/laravel53/public/api/notice").then(result=>{
          this.safe.list = result.data;
        })
      },
      //控制导航栏方法
      over(index) {
        var that = this;
        that.rightindex = index
        var arr = $("#BannerLii").children();
        for (var i = 0; i < arr.length; i++) {
          if (i == index) {
            var n = i;
            arr[i].style.left = "-3px";
            this.BannerLi(arr[i], n);
          }
        }
        $("#BannerLii").css({"left": '0%'});
      },
      BannerLi: function (index, n) {
        setTimeout(function () {
          var setArr = index.parentNode.children;
          for (var i = 0; i < setArr.length; i++) {
            if (i == n) {
              setArr[i].style.opacity = "1";
              // console.log(index);
            } else {
              setArr[i].style.opacity = "0";
            }
          }
        });
      },
      //关闭导航栏方法
      out(index) {
        var that = this;
        $("#BannerLii").css({"left": "-900%"});
      },
      outright: function () {

      },

    }
  };
</script>


<style>
  .banner-outer {
    position: relative;
    margin: 7px auto;
    width: 1200px;
    border: 1px solid #ccc;
    height: 340px;
  }

  .banner-outer .block {
    margin: 0 auto;
    width: 790px;
    height: 340px;
  }

  .el-carousel__container {
    position: relative;
    height: 340px;
  }

  .el-carousel__item > .imgList {
    display: block;
    height: 340px;
    width: 100%;
  }

  .el-carousel__indicators {
    bottom: 20px;
  }

  .banner-outer .banner-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 205px;
    overflow: hidden;
  }

  .banner-outer .banner-left .first-list {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: #222;
  }

  .banner-outer .banner-left > ul > li {
    position: relative;
    padding: 18px 34px 0 40px;
    width: 130px;
    height: 31px;
    border-left: 1px solid transparent;
    border-top: 1px dotted #ddd;
  }

  .banner-outer .banner-left > ul > li:hover {
    transition: all 0.5s linear;
    background: rgba(191, 191, 191, 0.5);
  }

  .banner-outer .banner-left > ul > li > h5 {
    display: inline-block;
    position: relative;
    color: #222;
    top: -15px;
    left: -35px;
  }

  .banner-outer .banner-left > ul > li > h5:after {
    content: ">";
    position: absolute;
    right: -155px;
    top: 0px;
    height: 19px;
    line-height: 19px;
    font-family: simsun;
  }

  .banner-outer .banner-left > ul > li > div {
    position: absolute;
    top: 0px;
    left: 36px;
    font-size: 5px;
  }

  .banner-outer .banner-left > ul > li > div > a {
    display: block;
    width: 140px;
  }

  .banner-outer .banner-left > ul > li > div > a > span {
    display: inline-block;
    padding: 0 5px;
    color: #909090;
    border-left: 1px solid #909090;
    line-height: 1;
  }

  .banner-outer .banner-left .colorAnimate:hover {
    transition: all 0.3s linear;
    color: #DC143C;
    font-weight: bolder;
  }

  .banner-outer .x-center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: 790px;
    height: 280px;
    background: rebeccapurple;
  }

  .banner-outer .youlei {
  }

  .banner-outer .banner-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
  }

  .banner-right {
    width: 202px;
    height: 340px;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
  }

  .banner-right i {
    padding-left: 5px;
    color: #ffd600;
  }

  .banner-right span:last-child {
    float: right;
    font-size: 15px;
    color: #ccc;
    line-height: 20px;
  }

  .banner-top {
    width: 100%;
    height: 25px;
    border-bottom: 1px solid #ccc;
    background: white;
  }

  .banner-pz {
    font-size: 15px;
    color: #e60d0d;
  }

  .banner-li {
    height: 30px;
    border-bottom: 1px solid #ccc;
    line-height: 30px;
    text-align: center;
    background: white;
    color: green;
  }

  .banner-ul {
    background: white;
  }

  .banner-ul li {
    list-style: square;
    font-size: 10px;
    margin-left: 23px;
    padding-top: 4px;
    color: #383131;
  }

  .bannerlastli {
    background: white;
  }

  .banner-img {
    width: 153px;
    margin: 0 auto;
  }

  #BannerLii {
    width: 789px;
    margin: 0 auto;
    position: relative;
    z-index: 999;
  }

  #BannerLii .states {
    width: 753px;
    height: 320px;
    /*border-right: 1px solid #ddd;*/
    margin: 0 auto;
    padding: 10px 20px;
    background: #fff;
    position: absolute;
    left: -900%;
    z-index: 999;
    overflow: overlay;
  }

  /*padding-bottom: 30px;*/

  #BannerLii .posten {
    position: relative;
  }

  #BannerLii .BannerLii-list {
    line-height: 22px;
    padding: 3px 6px 0 0;
    font-weight: 700;
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 30px;
  }

  #BannerLii .BannerLii-list a {
    color: #E4393C;
    font-size: 15px;
  }

  #BannerLii .BannerLii-left {
    position: absolute;
    top: 0;
    left: 62px;
    display: block;
    width: 700px;
    padding: 3px 0 0;
    overflow: hidden;
  }

  #BannerLii .BannerLii-left span {
    float: left;
    line-height: 14px;
    /*margin-top: 5px;*/
  }

  #BannerLii .BannerLii-left span .listss {
    float: left;
    font-size: 12px;
    text-align: center;
    font-weight: lighter;
    height: 16px;
    line-height: 16px;
    white-space: nowrap;
    color: #666;
    cursor: pointer;
    padding: 2px;
  }

  #BannerLii .BannerLii-left span .listss:hover {
    color: #00c65d;
  }


</style>
